const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const sun = {
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: 50,
	color: 'yellow'
};

const earth = {
	x: sun.x + 150,
	y: sun.y,
	radius: 10,
	color: 'blue',
	speed: 0.01,
	angle: 0
};

function draw() {
	context.clearRect(0, 0, canvas.width, canvas.height);

	// 绘制太阳
	context.beginPath();
	context.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
	context.fillStyle = sun.color;
	context.fill();

	// 绘制地球
	earth.x = sun.x + 150 * Math.cos(earth.angle);
	earth.y = sun.y + 150 * Math.sin(earth.angle);
	earth.angle += earth.speed;

	context.beginPath();
	context.arc(earth.x, earth.y, earth.radius, 0, Math.PI * 2);
	context.fillStyle = earth.color;
	context.fill();

	requestAnimationFrame(draw);
}

draw();